section {
  position: relative;
  $chartHeight: 310px;
  $headerHeight: 50px;
  $contentHeight: $chartHeight - $headerHeight;

  height: $chartHeight;

  .power-consumption-header {
    height: $headerHeight;
    line-height: $headerHeight;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid #F2F2F2;

    p{
      color: #5C6066;
      font-size: 14px;
      font-weight: 700;

      span{
        margin-left: 12px;
        font-size: 11px;
        color:#AEAEAE;
        font-style: italic;
        font-weight: normal;

        &:hover {
          color: #1C9DD6;
        }
      }
    }

    i {
      font-size: 18px;
      cursor: pointer;
      &:hover{
        color: #4285F4;
      }

    }

  }
  .power-consumption-con {
    height: $contentHeight;
    width: 100%;
    display: flex;
    justify-content: stretch;

    .pie-chart{
      width:35%;
      height:100%;
    }
    ul{
      line-height: 34px;
      //margin: 45px 35px 0 35px;
      margin: 2.4rem 1.7rem 0 1.7rem;
      li{
        font-size: 1.25rem;
        display: flex;
        flex-direction: row;
        white-space: nowrap;
        label{
          display: inline-block;

          &:first-child{
            width: 9rem;
          };
          &:nth-child(2){
            margin: 0 6rem 0 3rem;
          }

          i{
            margin-right: 1rem;
          }
        }
      }
    }
  }
}

/*
@media (min-width: 1200px) and (max-width: 1400px){


      .power-consumption-con {

        .pie-chart {
          transform: scale(0.9) !important;
     }


  }

}*/
